<template>
  <div class="flexRight">
    <a-pagination
      size="small"
      :show-total="(total) => `共 ${total} 条数据`"
      show-size-changer
      v-model:current="current1"
      v-model:pageSize="pageSize"
      :total="total"
      @showSizeChange="onShowSizeChange"
    />
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, watch } from 'vue';

  export default defineComponent({
    props: ['total'],
    emits: ['chagepage'],
    setup(_, { emit }) {
      const pageSize = ref(10);
      const current1 = ref(1);
      const onShowSizeChange = (current: number, pageSize: number) => {
        console.log(current, pageSize);
      };
      watch(pageSize, () => {
        console.log('pageSize', pageSize.value);
      });
      watch(current1, () => {
        emit('chagepage', current1.value);
      });
      return {
        pageSize,
        current1,
        onShowSizeChange,
      };
    },
  });
</script>

<style scoped lang="less">
  .flexRight {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    bottom: 14px;
    right: 20px;
  }
</style>
